<template>
  <!-- 定义echarts需要控制的dom元素 -->
  <div :style="{height:height,width:width}"/>
</template>
<script>
import * as echarts from 'echarts';


export default {
  name: 'App',
  data() {
    return {
      height: '500px',
      width: '610px',

      /*echarts数据*/
      chartData: {}
    }
  },
  mounted() {
    // dom元素加载完成后执行
    this.$nextTick(() => {
      // 初始化echarts实例
      this.initEcharts()
    })
  },
  methods: {
    initEcharts() {
      // 定义一个图表数据
      /*      this.chartData = {
              expectedData: [190, 100, 10, 9, 170, 110, 160],
              actualData: [120, 200, 150, 80, 70, 110, 130]
            }*/

      //参数一:this.$el指向当前组件template模板中的根标签(在mounted生命周期中才有效)
      //参数二:echarts主题颜色
      this.chart = echarts.init(this.$el,"macarons")
      this.setOptions()

    },
    setOptions() {
      let option ={
        tooltip: {
          text: '问卷问题选项统计',
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: "white" //设置文字颜色
          },
        },
        legend: {
          padding: [
            10,
            0,
            30,
            0
          ],
          align: 'left',
          orient: 'horizontal',
          left: 'center',

        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['问题1', '问题2', '问题3', '问题4', '问题5', '问题6', '问题7']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'A',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [4, 5, 8, 1, 3, 5, 2]
          },
          {
            name: 'B',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [5, 2, 1, 8, 10, 6, 7]
          },
          {
            name: 'C',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [9, 8, 5, 1, 3, 2, 1]
          },
          {
            name: 'D',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [5, 5, 2, 3, 10, 4, 4]
          },
          {
            name: 'E',
            type: 'bar',
            data: [0, 0, 0, 0, 7, 8, 0],
            emphasis: {
              focus: 'series'
            },
            // markLine: {
            //   lineStyle: {
            //     type: 'dashed'
            //   },
            //   data: [[{ type: 'min' }, { type: 'max' }]]
            // }
          },
          {
            name: 'F',
            type: 'bar',
            barWidth: 5,
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [0, 0, 0, 0, 4, 9, 0]
          },

        ]
      };
      this.chart.setOption(option);
    }
  }
}
</script>
